<template>
  <div>
    <!--头部+banner-->
    <div class="a-1">
      <!--顶部导航-->
      <div class="a-2">
        <div class="a-3">
          <Header v-bind:state="4"></Header>
        </div>
      </div>
      <!--banner-->
      <div class="target e-1" id="target-2">
        <div>
          <div>
            <img src="@/assets/image/ny-banner3.png" />
          </div>
        </div>
      </div>
      <!--消息通知-->
      <div class="a-14">
        <div class="a-15">
          <img class="a-16" src="@/assets/image/tz.png" />
          <div class="a-17">
            <div class="swiper-container swiper-containerOne">
              <div class="swiper-wrapper clearfix">
                <div class="swiper-slide" v-for="(item,index) in noticeList" :key="index">
                  <a href="javascipt:;">{{item.noticeContent}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--新闻列表-->
    <div class="e-2">
      <div class="e-3">
        <!--路由-->
        <div class="b-8">
          <div class="b-9">
            当前位置：
            <a href="javascript:;">首页</a> >
            <a href="javascript:;">行业资讯</a>
          </div>
        </div>
        <div class="e-4">
          <div class="show_news-1" v-if="tradeNews">
            <div class="show_news-2">
              <p>{{tradeNews.title}}</p>
              <p>{{tradeNews.create_time|Time}} | 华中版权</p>
            </div>
            <div class="show_news-3">{{tradeNews.content}}</div>
            <img v-if="tradeNews.image" :src="tradeNews.image" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import Header from "@/views/header.vue";
import MoPaging from "@/views/Page";
import http from "@/api/home";
export default {
  components: {
    Header,
    MoPaging,
  },

  created() {
    this.id = this.$route.query.product;
    this.noticeList = JSON.parse(window.sessionStorage.getItem("lb"));
    this.getNews();
  },
  data() {
    return {
      tradeNews: null,
      id: Number,
      noticeList: Array,
      tradeNewsList: [],
      pageSize: 5,
      totalPage: 1, //总页数
      currentPage: 1, //当前页
    };
  },
  methods: {
    // 下一页
    pageChange(e) {
      this.currentPage = e;
      // this.getNews();
    },
    getNews() {
      http
        .showNews({
          trade_news_id: this.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.tradeNews = res.data.tradeNews;
          }
        });
    },
  },
  filters: {
    Time(value) {
      return moment(value).format("YYYY-MM-DD");
    },
  },
  name: "index",
};
</script>

<style scoped>
@import "../../css/index.css";
@import "../../css/list_news.css";
.show_news-2 > p:first-child {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #121d43;
}
.show_news-2 > p:last-child {
  text-align: center;
  margin-bottom: 20px;
  color: #b1b1b1;
}
.show_news-3 {
  margin: 0px auto;
}
.show_news-3 img {
  max-width: 100%;
  display: block;
  margin: 10px auto;
}
</style>
